<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>manage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" th:href="@{imgs/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{css/okadmin.css}">
    <link rel="stylesheet" th:href="@{font/iconfont.css}">
</head>
<body>
<div class="ok-body">
    <blockquote class="layui-elem-quote">
        欢迎：<span class="x-red"><shiro:principal property="name"></shiro:principal></span>！当前时间: <span id="nowTime"></span> <span id="weekday"></span>
        <a class="layui-btn layui-btn-sm ok-refresh" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>数据统计</legend>
        <div class="layui-row layui-col-space10 layui-row-margin">
            <div class="layui-col-md2">
                <div class="layui-bg-green md2-sub1">
                    <i class="iconfont icon-tubiaozhexiantu"></i>
                </div>
                <div class="md2-sub2">
                    <span th:text="${accessNum}"></span>
                    <cite>访问量</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-blue md2-sub1">
                    <i class="iconfont icon-denglu"></i>
                </div>
                <div class="md2-sub2">
                    <span>--</span>
                    <cite>当前活跃</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-black md2-sub1">
                    <i class="iconfont icon-dianliyonghuzongshu"></i>
                </div>
                <div class="md2-sub2">
                    <span>--</span>
                    <cite>今日活跃</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-orange md2-sub1">
                    <i class="iconfont icon-pinglun"></i>
                </div>
                <div class="md2-sub2">
                    <span th:text="${commentTotal}"></span>
                    <cite>留言总数</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-red md2-sub1">
                    <i class="iconfont icon-wenzhang2"></i>
                </div>
                <div class="md2-sub2">
                    <span th:text="${articleTotal}"></span>
                    <cite>文章总数</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-cyan md2-sub1">
                    <i class="iconfont icon-webpage"></i>
                </div>
                <div class="md2-sub2">
                    <span th:text="${pageCount}"></span>
                    <cite>页面总数</cite>
                </div>
            </div>
        </div>
    </fieldset>
    <blockquote class="layui-elem-quote">
        系统基本参数
    </blockquote>
    <table class="layui-table">
        <colgroup>
            <col width="300">
            <col>
        </colgroup>
        <tbody>
        <tr>
            <td>本机IP</td>
            <td th:text="${accessIP}">1.1.1.1</td>
        </tr>
        <tr>
            <td>服务器IP</td>
            <td th:text="${ipAddress}">1.1.1.1</td>
        </tr>
        <tr>
            <td>操作系统</td>
            <td th:text="${osInfo}"></td>
        </tr>
        <tr>
            <td>运行环境</td>
            <td th:text="${javaInfo}">JDK 1.8.0_171</td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="diskInfo" style="width: 100%;height:400px;"></div>
            </td>
        </tr>
        </tbody>
    </table>
    <blockquote class="layui-elem-quote">
        留言
    </blockquote>
    <ul class="layui-timeline" th:if="${not #lists.isEmpty(comments)}">
        <li th:each="comment : ${comments}" class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title" th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm')}">6月15日</h3>
                <p>
                    <span th:text="${comment.visitorLink}"></span>
                    <p th:text="${comment.content}"></p>
                </p>
            </div>
        </li>
    </ul>
</div>
<!--js引入-->
<script th:src="@{lib/layui/layui.js}"></script>
<script th:src="@{lib/echarts/echarts.common.min.js}"></script>
<!--js逻辑-->
<script type="text/javascript">
    // 展示磁盘信息
    function showDiskInfo(diskInfo){
        var myChart = echarts.init(document.getElementById('diskInfo'), null, {renderer : 'svg'});
        var option = {
            title : {
                text: '磁盘使用情况',
                subtext: '总空间:' + diskInfo.totalSpaceDisplay,
                x:'center'
            },
            color:['#C23531', '#009688'],
            tooltip : {
                trigger: 'item',
                formatter: function (a) {
                    return a.data.name + ":" + a.data.display + "(" + a.percent + "%)";
                }
            },
            series : [
                {
                    name: '明细',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:diskInfo.usedSpace, name:'已用空间', display: diskInfo.usedSpaceDisplay},
                        {value:diskInfo.freeSpace, name:'可用空间', display: diskInfo.freeSpaceDisplay}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

    layui.use(['util', 'jquery'], function () {
        var util = layui.util;
        var $ = layui.jquery;
        util.fixbar({});

        $.ajax({
            url : "diskSpaceInfo",
            dataType : "json",
            method : "get",
            success : function(diskInfo){
                showDiskInfo(diskInfo);
            }
        });

    });



    /**
     * 初始化函数
     */
    setDate();

    /**
     * 获取当前时间
     */
    var nowDate1 = "";
    function setDate() {
        var date = new Date();
        var year = date.getFullYear();
        nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + "  ";
        nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
        document.getElementById("nowTime").innerHTML = nowDate1;
        setTimeout('setDate()', 1000);
    }

    /**
     * 年月日是分秒为10以下的数字则添加0字符串
     * @param time
     * @returns {number | *}
     */
    function addZero(time) {
        var i = parseInt(time);
        if (i / 10 < 1) {
            i = "0" + i;
        }
        return i;
    }

    /**
     * 初始化星期几
     * @type {string}
     */
    var weekday = "星期" + "日一二三四五六".charAt(new Date().getDay());
    document.getElementById("weekday").innerHTML = weekday;
</script>
</body>
</html>
